<template>
  <div class="searchcom">
    <van-nav-bar
      @click-left="$router.back()"
      class="searchcom_head"
      :title="key === 'share' ? '面经分享搜索' : '面试技巧搜索'"
    >
      <template #left>
        <span class="iconfont lefticon">&#xe637;</span>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      class="search"
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @input="inputsearch"
    />
    <div class="pannel">
      <div class="up" v-if="searchList.length === 0">
        <!-- 大家都在搜 -->
        <van-cell>
          <template #title>
            <span class="title">大家都在搜</span>
          </template>
        </van-cell>
        <div class="item">
          <span
            v-for="(item, index) in hotList"
            :key="index"
            @click="mysearch(item)"
            >{{ item }}</span
          >
        </div>

        <!-- 历史记录 -->
        <van-cell>
          <template #title>
            <span class="title">历史记录</span>
          </template>
          <template #default>
            <span class="clear" @click="clear">清空</span>
          </template>
        </van-cell>
        <div class="item">
          <span
            v-for="(item, index) in technichList"
            :key="index"
            @click="mysearch(item)"
            v-show="key === 'technich'"
            >{{ item }}</span
          >
          <span
            v-for="(subitem, subindex) in shareList"
            :key="subindex"
            @click="mysearch(subitem)"
            v-show="key === 'share'"
            >{{ subitem }}</span
          >
        </div>
      </div>
      <!-- 搜索结果界面 -->
      <div class="searchResult" v-else>
        <skillart
          v-for="(item, index) in searchList"
          :key="index"
          :item="item"
          :value='value'
          v-show="key === 'technich' && istechnich === true"
        ></skillart>
        <sharecom
          v-for="(subitem, subindex) in searchList"
          :key="subindex + '1'"
          :item="subitem"
          :value='value'
          v-show="key === 'share' && isshare === true && searchList"
        ></sharecom>
      </div>
    </div>
  </div>
</template>

<script>
import skillart from '../find/com/skillart.vue'
import sharecom from '../find/com/sharecom.vue'
import {
  articlesTechnicTopSearch,
  articlesTechnic,
  articlesShareTopSearch,
  articlesShare
} from '@/api/api.js'
export default {
  components: { skillart, sharecom },
  data () {
    return {
      value: '',
      hotList: [],
      searchList: [],
      timer: null,
      technichList: [],
      shareList: [],
      istechnich: false,
      isshare: false,
      key: ''
    }
  },
  created () {
    this.key = this.$route.params.key
    this.getHot()
    if (this.key === 'technich') {
      if (localStorage.getItem('technich')) {
        this.technichList = JSON.parse(localStorage.getItem('technich'))
      } else {
        localStorage.setItem('technich', JSON.stringify(this.technichList))
      }
    } else if (this.key === 'share') {
      if (localStorage.getItem('share')) {
        this.shareList = JSON.parse(localStorage.getItem('share'))
      } else {
        localStorage.setItem('share', JSON.stringify(this.shareList))
      }
    }
  },
  methods: {
    // 清空历史
    clear () {
      if (this.key === 'technich') {
        localStorage.removeItem('technich')
        this.technichList = []
      } else {
        localStorage.removeItem('share')
        this.shareList = []
      }
    },
    // 大家都在搜和历史记录下span 的点击事件
    mysearch (item) {
      this.value = item
      this.onSearch(this.value)
    },
    // 搜索框input事件
    inputsearch () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.onSearch(this.value)
      }, 1000)
    },
    // 获取热搜
    async getHot () {
      const res =
        this.key === 'technich'
          ? await articlesTechnicTopSearch()
          : await articlesShareTopSearch()
      this.hotList = res.data.data
    },
    // 搜索
    async onSearch (value) {
      const res =
        this.key === 'technich'
          ? await articlesTechnic({ limit: 999999, q: value })
          : await articlesShare({ limit: 999999, q: value })
      this.istechnich = true
      this.isshare = true
      this.searchList = res.data.data.list
      if (this.value === '') {
        this.searchList = []
        return
      } else {
        this.key === 'technich'
          ? this.technichList.unshift(value)
          : this.shareList.unshift(value)
      }
      if (this.key === 'technich') {
        this.technichList = [...new Set(this.technichList)]
        localStorage.setItem('technich', JSON.stringify(this.technichList))
      } else {
        this.shareList = [...new Set(this.shareList)]
        localStorage.setItem('share', JSON.stringify(this.shareList))
      }
    },
    // 取消搜索
    onCancel () {}
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.searchcom {
  padding: 10px;
  .searchcom_head {
    span {
      font-size: 30px;
      color: #000;
    }
  }
  .search {
    margin-bottom: 16px;
  }
  .pannel {
    border-top: 2px solid #f7f4f5;
    .title {
      padding-top: 20px;
      font-size: 18px;
    }
    .clear {
      color: #000;
    }
    .item {
      margin-bottom: 10px;

      span {
        color: #666;
        padding: 6px;
        border-radius: 4px;
        background-color: #eceaea;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  /deep/.van-search__content {
    background-color: #f7f4f5;
  }
}
</style>
